<template>
  <el-button class="mb20" @click="add" type="primary">新增</el-button>

  <el-table class="mb20" :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="标题" />
    <el-table-column prop="author" label="作者" />
    <el-table-column
	          prop="images"
	          label="分类"
	          width="100"      
	        >
	          <template #default="scope">		  
	              {{classlist.find(t=>t.id==scope.row.flid)&&classlist.find(t=>t.id==scope.row.flid).name}}
	          </template>
	        </el-table-column>

          <el-table-column
	          prop="images"
	          label="分类"
	          width="100"      
	        >
	          <template #default="scope">		  
	              {{scope.row.bqname}}
	          </template>
	        </el-table-column>
    <el-table-column
	          prop="images"
	          label="图片"
	          width="100"      
	        >
	          <template #default="scope">		  
	              <el-image
	                  style="width: 100px; height: 100px"
	                  :src="ifImgHeaders(scope.row.images)"
	                  :preview-src-list="[ifImgHeaders(scope.row.images)]"
	                >
	                </el-image>
	          </template>
	        </el-table-column>

          <el-table-column
	          prop="images"
	          label="视频"
	          width="300"      
	        >
	          <template #default="scope">		  
	              <video
                controls
	                  style="width: 280px; height: 100px"
	                  :src="ifImgHeaders(scope.row.vlink)"
	                  
	                >
	                </video>
	          </template>
	        </el-table-column>    
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="edit({ row: scope.row, index: scope.$index })">
          编辑</el-button>
        <el-button size="mini" type="danger" @click="removeModal({ row: scope.row, index: scope.$index })">删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="modalState" title="标题">
    <el-form :model="form" ref="rule" :rules="rules">
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="作者" :label-width="formLabelWidth">
        <el-input v-model="form.author" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="分类" :label-width="formLabelWidth">
        <el-select v-model="form.flid" class="m-2" placeholder="请选择分类" size="large">
          <el-option v-for="item in classlist" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" :label-width="formLabelWidth">
        <el-select v-model="form.bqids" multiple placeholder="请选择标签">
          <el-option v-for="item in bqlist" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-upload  :key="form.images" class="avatar-uploader" :action="`${api}/index.php/index/Hdapi/uploadimg`"
          :headers="{ tokenid: 'nfxcx20220421mao2ctH4NHhSbkZnNPTFLRgtv' }" :data="jm()" :show-file-list="false"
          :on-success="(file) => { editImgsProps({ file, key: 'images' }) }">
          <img v-if="form.images" :src="ifImgHeaders(form.images)" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </el-form-item>
      <el-form-item label="视频" :label-width="formLabelWidth">
        <el-upload  :key="form.vlink" class="avatar-uploader" :action="`${api}/index.php/index/Hdapi/uploadvideo`"
          :headers="{ tokenid: 'nfxcx20220421mao2ctH4NHhSbkZnNPTFLRgtv' }" :data="jm()" :show-file-list="false"
          :on-success="(file) => { editImgsProps({ file, key: 'vlink' }) }">
          <video controls v-if="form.vlink" :src="ifImgHeaders(form.vlink)" class="avatar" ></video>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

      </el-form-item>
      <el-form-item label="定时发布" :label-width="formLabelWidth">
          <el-switch active-value="1"  inactive-value="0" v-model="form.starttimestate"/>
      </el-form-item>
     
      <el-form-item v-show="form.starttimestate==1" label="发布时间" :label-width="formLabelWidth">
        <el-date-picker
        v-model="form.starttime"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
        type="date"
        placeholder="选择发布时间"
        :size="size"
      />
      </el-form-item>
     
      <el-form-item label="是否显示" :label-width="formLabelWidth">
          <el-switch active-value="1"  inactive-value="0" v-model="form.state" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="modalState = false">取消</el-button>
        <el-button type="primary" @click="submit('rule')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  data() {
    return {
      bqlist: [],
      classlist: [],
      keyword: "",
      selectData: null,
      formLabelWidth: "120rpx",
      form: {
        starttime:"",
        starttimestate:'0',
        state: "1",
        flid: "",
        bqid: "",
        bqids: "",
        name: "",
        author: "",
        images: "",
        vlink: ""
      },
      tableData: [],
      counts: 0,
      rules: {

      },
      pid: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$http.post("/index.php/index/Hdapi/videofllist").then((data) => {
        this.classlist = data;
      });
      this.$http.post("/index.php/index/Hdapi/videobqlist").then((data) => {
        this.bqlist = data;
      });
      this.$http.post("/index.php/index/Hdapi/videoslist").then((data) => {
        this.tableData = data;
      });
      
    },
    submit(ref) {
     
      this.doRules(this.$refs[ref]).then(() => {
        if (this.id) this.form.id = this.id;
        this.form.bqid=this.form.bqids.join(",");
        this.form.bqname=this.bqlist.filter(t=>{
          return this.form.bqids.some(ts=>ts==t.id)
        }).map(t=>t.name).join(",");
        console.log(this.form)
        this.$http
          .post(
            this.id
              ? "/index.php/index/Hdapi/videosedit"
              : "/index.php/index/Hdapi/videosadd",
            this.form
          )
          .then((data) => {
            console.log(data);
            this.modalState = false;
            ElMessage({
              message: this.id ? "编辑成功" : "新增成功",
              type: "success",
            });
            this.getData();
          });
      });
    },
    remove(data) {
      this.$http
        .post("/index.php/index/Hdapi/videosdel", {
          id: data.row.id,
        })
        .then((data) => {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          this.getData();
        });
    },
    handleAvatarSuccess(file) {
      this.form.image = file.data;
    },
  },
};
</script>
<style scoped>

</style>

<style>
  .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>